<script setup lang="ts">
import { useI18n } from 'vue-i18n';
definePageMeta({
  layout: 'default',
  title: '立即提现',
  i18n: 'menu.nowWithDraw',
})

const { t } = useI18n();
const route = useRoute()
const router = useRouter();

const { moneyName, payMethodName, gold } = route.query
console.log(route.query)
const totalAmount = 9999999 // 总金额
const withPay = ref<string[]>(['0'])
const withPayName = ref<string>('微信')
const show = ref(false)
const pickerArr = ref([
  { name: '微信', code: '0' },
  { name: '支付宝', code: '1' },
  { name: '银行卡', code: '2' },
])

function onLanguageConfirm(event: { selectedOptions: any }) {
  withPay.value = [event.selectedOptions[0]?.code]
  withPayName.value = event.selectedOptions[0]?.name
  show.value = false
}

const address = ref('')
// const gold = ref<number | null>(null)
const phone = ref('')
const idCard = ref('')

const onsubmit = (values: any) => {
  console.log('submit', values)
}
const goPush = (url: string) => {
  router.push(url)
};
</script>


<template>
  <div mx-auto text-16 text-dark dark:text-white relative>
    <van-form @submit="onsubmit">
      <div flex justify-between flex-col my-15>
        <div class="w-110 color-#8b8d93 mb-5"> {{ t("recharge_page.nowWithDraw.gold") }}</div>
        <div class="color-#272d33 text-20">$ {{ moneyName ? moneyName : gold }}</div>
      </div>

      <div flex justify-between flex-col my-15>
        <div class="color-#8b8d93  mb-5">{{ t("recharge_page.nowWithDraw.way") }}</div>
        <div class="w-120 px-20 py-8 color-#272d33 text-14 border-1 boder-#e8e8e8 rounded-6 bg-#ffffff">{{ payMethodName
        }}</div>
      </div>

      <div flex justify-between flex-col my-15>
        <div class="color-#8b8d93 mr-10 w-110">{{ t("recharge_page.nowWithDraw.address") }}</div>
        <van-field v-model="address" name="address" placeholder="请输入提现地址" clearable
          :rules="[{ required: true, message: '请输入提现地址' }]">
          <template #right-icon>
            <img src="/img/copy.png" alt="" class="w-16 h-16">
          </template></van-field>
      </div>

      <div flex justify-between flex-col my-15>
        <div class="color-#8b8d93 mr-10 w-110">{{ t("recharge_page.nowWithDraw.phone") }}</div>
        <van-field v-model="phone" name="phone" placeholder="请输入提现号码" clearable
          :rules="[{ required: true, message: '请输入提现号码' }]">
          <template #right-icon>
            <img src="/img/copy.png" alt="" class="w-16 h-16">
          </template></van-field>
      </div>

      <div flex justify-between flex-col my-15>
        <div class="color-#8b8d93 mr-10 w-110">{{ t("recharge_page.nowWithDraw.cardId") }}</div>
        <van-field v-model="idCard" name="idCard" placeholder="请输入提现卡号" clearable :rules="[
          { required: true, message: '请输入提现卡号' },
          {
            validator: (val) => {
              if (!val) return '请输入提现卡号'
              if (!/^\d+$/.test(val)) return '卡号必须为数字'
              return true
            }
          }
        ]"> <template #right-icon>
            <img src="/img/copy.png" alt="" class="w-16 h-16">
          </template></van-field>
      </div>

      <div mt-20>
        <van-button block type="primary" native-type="submit">
          {{ t("recharge_page.nowWithDraw.nowWithDraw") }}
        </van-button>
      </div>
    </van-form>
    <!-- <div class="w-full flex p-16 justify-between absolute bottom--200 left-0 right-0">
      <van-button block type="primary" native-type="button" to="/custoService">
        {{ t("recharge_page.nowWithDraw.contract") }}
      </van-button>
      <div class="w-20"></div>
      <van-button block native-type="button" to="/recharge/withDrawList">
        {{ t("recharge_page.nowWithDraw.withDrawList") }}
      </van-button>
    </div> -->
    <van-popup v-model:show="show" position="bottom">
      <van-picker v-model="withPay" :columns="pickerArr" :columns-field-names="{ text: 'name', value: 'code' }"
        @confirm="onLanguageConfirm" @cancel="show = false" />
    </van-popup>
    <div class="flex justify-between  mt-20">
      <div class="w-165 bg-#f6f7ff text-center py-10 color-#6d788e text-14 border-1 border-#e2ecf4 rounded-5"
        @click="goPush('/custoService')"> {{ t("recharge_page.nowWithDraw.contract") }}</div>
      <div class="w-165 bg-#f6f7ff text-center py-10 color-#6d788e text-14 border-1 border-#e2ecf4 rounded-5"
        @click="goPush('/recharge/withDrawList')"> {{ t("recharge_page.withDrawList.withDrawList") }}</div>
    </div>
  </div>
</template>

<style lang="css" scoped>
::v-deep .van-cell-group--inset {
  background: transparent;
}

::v-deep .van-cell {
  background: #dee9ef;
  color: #aab2bb;
  margin: 10px 0;
  padding: 5px 16px;
  border-radius: 5px;
  border: 1px solid #ddd;
}
</style>
